<template>
  <div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="68px">
	  
	  <el-form-item label="学校" prop="xxid">
	    <el-select v-model="queryParams.xxid" @change="schoolChange" placeholder="请选择学校" :disabled="isXxidFlag">
	      <el-option
	        v-for="d in dept_self"
	        :key="d.value"
	        :label="d.label"
	        :value="d.value"
	      />
	    </el-select>
	  </el-form-item>	
	  <el-form-item label="班级" prop="bjid">
	    <el-select v-model="queryParams.bjid" @change="classChange" placeholder="请选择班级">
	  	<el-option value="" label="全部" ></el-option>
	  	<el-option
	  	  v-for="c in classList2"
	  	  :key="c.value"
	  	  :label="c.label"
	  	  :value="c.value"
	  	/>
	    </el-select>
	  </el-form-item>
	  <el-form-item label="年级" prop="njid" v-show="true">
			<!-- <dict-tag :options="tc_nj" :value="queryParams.njid" /> -->
		  <el-select v-model="queryParams.njid" @change="handleQuery" placeholder="请选择班级">
            <el-option
              v-for="dict in tc_nj"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
		  </el-select>
	  </el-form-item>
	  <el-form-item label="体测项目" prop="tcxmid">
	  		  <el-select v-model="queryParams.tcxmid" placeholder="体测项目"   @change="handleQuery" clearable>
				<el-option value="" label="全部" ></el-option>
	  			<el-option
	  			  v-for="c in projectList"
	  			  :key="c.id"
	  			  :label="c.xmMc"
	  			  :value="c.id"
	  			/>
	  		  </el-select>
	  </el-form-item>
	</el-form>
	<el-row justify-content="center">
		<div id="main" style="width: 90%;height:400px;"></div>
	</el-row>
	
  </div>
	
</template>

<script setup name="Nnjgtj">
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user";
import { listDept } from "@/api/system/dept";
import { listStudent} from "@/api/tc/student";
import { listClass} from "@/api/tc/class";
import { listProject} from "@/api/tc/project";
import { jgfx} from "@/api/tc/datafx";
const { proxy } = getCurrentInstance();
const { tc_nj } = proxy.useDict('tc_nj');
const userStore = useUserStore();

const userinfo = reactive({
  token: userStore.token,
  id: userStore.id,
  name: userStore.name,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
});	
const data = reactive({
  form: {},
  queryParams: {
    xxid: null,
    bjid: '',
	tcxmid:'',
	njid:''
  },
  rules: {
	  xxid: [
	    { required: true, message: "学校不能为空", trigger: "change" }
	  ]
	  
  }
});

const { queryParams, form, rules } = toRefs(data);
const isXxidFlag=ref(false);
const myChartOption=ref(null);
const dept_self = ref([]);
const classList = ref([]);
const classList2 = ref([]);
const projectList = ref([]);
const tcdata=ref({});
const countSum=ref(0);
const tmpProPar={pageNum: 1,pageSize: 999,xmStatus:'1'};
var myChart;

onMounted(() => {
	      // console.log('组件已经挂载')
	 	  // console.log(1)
	 	  // console.log(echarts)
		  // tcdata.value["nan"]= [5, 20, 36, 10];
		  // tcdata.value["nv"]= [5, 10, 16, 8];
	 	  // 基于准备好的dom，初始化echarts实例
	 	  myChart = echarts.init(document.getElementById('main'));
	 	  // 绘制图表
	 	  myChartOption.value={
	 	    title: {
	 	      text: '测体成绩男、女 评分统计',
			  left: "center",
	 	    },
	 	    tooltip: {},
			legend: {
				right: "0%"
			},
	 	    xAxis: {
				containLabel: true,
				data: ['优秀', '良好', '及格', '不及格']
	 	    },
	 	    yAxis: [
	 			{
	 				type: 'value',
	 				// name: '人数',
	 				min: 0,
					interval:10, // 步长
	 				// max: 100,
	 				position: 'left',
	 				axisLabel: {
	 					formatter: '{value} 人'
	 				}
	 			}
	 		],
	 	    series: [
	 	      {
	 	        name: '男',
	 	        type: 'bar',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  { offset: 0, color: '#83bff6' },
					  { offset: 0.5, color: '#188df0' },
					  { offset: 1, color: '#188df0' }
					])
				},
				emphasis: {
					itemStyle: {
					  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#2378f7' },
						{ offset: 0.7, color: '#2378f7' },
						{ offset: 1, color: '#83bff6' }
					  ])
					}
				},
			  label: {
				show: true,
				position: 'inside'
			  },
	 	        data:tcdata.value.nan
	 	      },
	 	      {
	 	        name: '女',
	 	        type: 'bar',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  { offset: 0, color: '#999999' },
					  { offset: 0.5, color: '#ee2266' },
					  { offset: 1, color: '#ee6666' }
					])
				},
				emphasis: {
					itemStyle: {
					  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#ee6666' },
						{ offset: 0.7, color: '#ee2266' },
						{ offset: 1, color: '#999999' }
					  ])
					}
				},
			  label: {
				show: true,
				position: 'inside'
			  },
	 	        data: tcdata.value.nv
	 	      }
	 	    ]
	 	  };
		  getDeptInfo();
 })
function getDeptInfo(){
		// console.log(userStore.user)
		if(checkRole(['admin','common'])){
			listDept({}).then(response => {
			  	response.data.forEach(function (element) {
			  	  // 遍历数组，对每个元素进行操作
				   if(element.xxlevel !=null && element.xxlevel != ''){
						dept_self.value.push({"value":element.deptId,"label":element.deptName});
				   }
			  	});
				queryParams.value.xxid=dept_self.value[0].value;
				getClassList(null);
				getProjectList();
			});
			isXxidFlag.value=false;
		}else{
			dept_self.value.push({"value":userStore.user.deptId,"label":userStore.user.dept.deptName});
			queryParams.value.xxid=dept_self.value[0].value;
			isXxidFlag.value=true;
			getClassList(queryParams.value.xxid);
			getProjectList();
		}
}

function getClassList(bjid){
	// if(checkRole(['admin','common'])){
	// 	bjid=null;;
	// }else{
	// 	bjid=userStore.user.deptId;
	// }
	listClass({"pageNum": 1,"pageSize": 500,"bjXxid" : bjid}).then(response => {
		response.rows.forEach(function (el) {
		  // 遍历数组，对每个元素进行操作
		  // console.log(el)
			classList.value.push({"value":el.id,"label":el.bjName,"xxid":el.bjXxid,"njid":el.bjNj});
		});
		if(classList.value.length > 0){
			// queryParams.value.bjid=classList.value[0].value;
			schoolChange(classList.value[0].xxid)
			// schoolChangeAU(classList.value[0].xxid)
		}
	});
}
/** 查询体测项目列表 */
function getProjectList() {
  // loading.value = true;
  listProject(tmpProPar).then(response => {
    projectList.value = response.rows;
    // loading.value = false;
	// getProjectTypeList();
	 // getJGFXList();
  });
}

function getJGFXList() {
  // loading.value = true;
  // let tmp={pageNum: 1,pageSize: 500};
	  // console.log(queryParams.value);
	  
  jgfx(queryParams.value).then(response => {
	  // console.log(response);
	  if(response.data.length==0){
		  myChartOption.value.series[0].data=[]
		  myChartOption.value.series[1].data=[];
	  }else{
		  countSum.value=0;
		  tcdata.value={};
		  response.data.forEach((e)=>{
			  if(e.sj_sex=="0"){
				  //男
				tcdata.value["nan"]= [e.yx, e.lh, e.jg, e.bjg];
			  }
			  if(e.sj_sex=="1"){
				  //女
				tcdata.value["nv"]= [e.yx, e.lh, e.jg, e.bjg];
			  }
			  countSum.value+=parseInt(e.xscount)
		  })
		  myChartOption.value.series[0].data=tcdata.value["nan"];
		  myChartOption.value.series[1].data=tcdata.value["nv"];
	  }
	  // console.log(myChartOption.value.series)
	  myChartOption.value.title.subtext=`共(${countSum.value})人`;
	  myChart.setOption(myChartOption.value);
    // projectList.value = response.rows;
    // loading.value = false;
	// getProjectTypeList();
  });
}

function schoolChange(e){
	classList2.value= classList.value.filter(function(currentValue,index,arr){
		// console.log(currentValue)
		return currentValue.xxid == e ;
	});
	classChange("");
	// if(classList2.value.length==0){
	// 	queryParams.value.bjid='';
	// }else{
	// 	queryParams.value.bjid=classList2.value[0].value;
	// }
	// handleQuery();
}	
 function classChange(e){
	 // console.log("class"+e)
	 if(e==null || e==""){
		 queryParams.value.njid="";
		 queryParams.value.bjid="";
	 }else{
		 let p= classList2.value.filter(function(currentValue,index,arr){
			// console.log(currentValue)
			return currentValue.value == e ;
		 });
		  // console.log("class"+p)
		 queryParams.value.njid=p[0].njid
		 
	 }
	handleQuery();
 } 
 function handleQuery(){
	//  // console.log(classList2.value)
	//  let tmp= classList2.value.filter(function(currentValue,index,arr){
	//  	// console.log(currentValue)
	//  	return currentValue.value == e ;
	//  });
	// queryParams.value.sjNjid=tmp[0].nj;
	getJGFXList();
 }

</script>

<style>
</style>